<template>
    <div class="iframe-wrapper">
      <div class="title">
        <div class="back-wrapper">
          <back></back>
        </div>
        {{name}}
      </div>
      <div class="content">
        <iframe :src="url" frameborder="0" style="width: 100%;height: 100%"></iframe>
      </div>
    </div>
</template>

<script>
  import back from '../../../components/back/back'
    export default {
        name: "iframeWrapper",
        components:{
          'back':back
        },
        data(){
          return{
            name:'',
            url:''
          }
        },
        created() {
          console.log(this.$route)
          this.name = decodeURI(this.$route.query.name)
          this.url = decodeURI(this.$route.query.url)
        }
    }
</script>

<style scoped lang="stylus">
  .iframe-wrapper
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      height calc(100% - 42px)

</style>
